<template>
  <el-container direction="vertical">
    <Header />
    <el-main>


      <el-tabs :tab-position="tabPosition" style="height:1200px;">
        <el-tab-pane label="基本资料">
         <PersonCard/>
        </el-tab-pane>
        <el-tab-pane label="头像修改">
          <Upload />
        </el-tab-pane>
        <el-tab-pane label="密码修改" class="pass">
          <ChangePass />
        </el-tab-pane>
        <el-tab-pane label="我的收藏">
          <CollectList />
        </el-tab-pane>
        <el-tab-pane label="浏览记录">
          <History />
        </el-tab-pane>
      </el-tabs>


    </el-main>
  </el-container>
</template>

<script scoped>
import Footer from '../components/Footer.vue'
import Header from '../components/Header.vue'
import ChangePass from '../components/ChangePass.vue'
import History from '../components/History.vue'
import Upload from '@/components/Upload.vue'
import CollectList from '../components/CollectList.vue'
import PersonCard from '../components/PersonCard.vue'
export default {
  data() {
    return {
      tabPosition: 'left'
    };
  },
  components: {
    Footer,
    Header,
    ChangePass,
    History,
    Upload,
    CollectList,
    PersonCard
  },
  methods: {
    // handleOpen(key, keyPath) {
    //   console.log(key, keyPath);
    // },
    // handleClose(key, keyPath) {
    //   console.log(key, keyPath);
    // }
  }
}
</script>

<style >
.el-tabs__item {
  height: 70px;
  font-size: 16px;
  padding: 0 90px;
}
</style>